<template>
  <div>
    <!-- 公司基本信息 -->

    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">公司基本信息</el-button>
      </div>
    </div>
  </div>

  <div class="title">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="公司名称" prop="name" style="width: 1000px">
        <el-input style="width: 410px; height: 30px" v-model="ruleForm.name" />
        <span class="sc_name">
          【上传营业执照，审核后，自动显示公司名称】
        </span>
      </el-form-item>

      <el-form-item
        label="主营产品"
        prop="name"
        style="display: flex; width: 1000px"
      >
        <el-input style="width: 200px; height: 30px" v-model="ruleForm.name" />
        <el-input
          style="width: 200px; height: 30px; margin: 0 10px"
          v-model="ruleForm.name"
        />
        <el-input
          style="width: 200px; height: 30px; margin-right: 10px"
          v-model="ruleForm.name"
        />
        <el-input style="width: 200px; height: 30px" v-model="ruleForm.name" />
        <p class="cp">
          请至少填写一个您主营的产品或服务（0~8字），若填写相同内容，在提交时系统将会自动剔除
        </p>
      </el-form-item>

      <el-form-item label="上传证书图片">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <img src="../../../assets/img/35.png" alt="" />
          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <el-icon>
                    <Download />
                  </el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="经营模式" prop="type" style="width: 1000px">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="生产加工" name="type" />
          <el-checkbox label="经销批发" name="type" />
          <el-checkbox label="商业服务" name="type" />
          <el-checkbox label="招商代理" name="type" />
          <el-checkbox label="其他" name="type" />
        </el-checkbox-group>
      </el-form-item>

      <el-form-item class="footer">
        <div class="son">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import "../../../assets/css/size.css";

const formSize = ref("default");
const ruleFormRef = ref;

const ruleForm = reactive({
  name: "Hello",
  delivery: false,
  type: [],
});

const rules = {
  name: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],

  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
};

const submitForm = async () => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = () => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style>
.el-form-item__label {
  font-size: 14px;
}

/* 上传图片样式 */
.el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
}
</style>
<style lang="scss" scoped>
.title {
  // width: 1610px;
  // height: calc(100vh - 80px - 60px - 20px);
  // height: 930px;
  background-color: #fff;
  margin: 0 0 10px 10px;

  .demo-ruleForm {
    padding: 40px 0 0 0;
    position: relative;
  }

  .sc_name {
    width: 294px;
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #d90424;
  }

  .cp {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #abb3c3;
  }
}

// 确定取消 按钮
.footer {
  // width: 1610px;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  margin-top: 400px;

  .son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
  }
}
</style>
